<template>
  <div class="home">
    <header class="clearfix">
      <p class="title">人员轨迹分析</p>
      <div class="search-from">
        <el-form ref="from" :model="fromData">
          <el-form-item>
            <el-date-picker
              v-model="fromData.fromDate"
              align="right"
              type="date"
              size='small'
              style='width:130px;'
              placeholder="开始日期"
              value-format='timestamp'
              :picker-options='pickerBegin.before'>
            </el-date-picker>
            <span class="slabel">至</span>
            <el-date-picker
              v-model="fromData.toDate"
              align="right"
              type="date"
              size='small'
              style='width:130px;'
              placeholder="结束日期"
              value-format='timestamp'
              :picker-options='pickerBegin.after'>
            </el-date-picker>
          </el-form-item>
          <el-form-item style="margin-left: 10px">
            <el-input v-model="fromData.id" clearable placeholder="请输入身份证号" @keyup.enter.native="getRegularData()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" @click="getRegularData()"></el-button>
          </el-form-item>
        </el-form>
      </div>
    </header>
    <section class="content">
      <div class="content-left">
        <div class="left-top">
          <div class="img-wrapper">
            <img :src="infoList.img" alt="">
          </div>
          <p class="text">{{infoList.name}}</p>
          <p class="text">{{infoList.id}}</p>
        </div>
        <ul class="left-bottom">
          <li>
            <label><i class="iconfont icon-xingbie"></i><i>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</i></label>
            <span>{{infoList.sex}}</span>
          </li>
          <li>
            <label><i class="iconfont icon-nianling"></i><i>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄</i></label>
            <span>{{infoList.age}}</span>
          </li>
          <li>
            <label><i class="iconfont icon-shouji"></i><i>手机号码</i></label>
            <span>{{infoList.tel}}</span>
          </li>
          <li>
            <label><i class="iconfont icon-shenfenzheng"></i><i>户籍地址</i></label>
            <span>{{infoList.hjdz}}</span>
          </li>
          <li>
            <label><i class="iconfont icon-chepai"></i><i>车牌号码</i></label>
            <span>{{infoList.cph}}</span>
          </li>
          <li>
            <label><i class="iconfont icon-jiating"></i><i>家庭地址</i></label>
            <span>{{infoList.jtdz}}</span>
          </li>
        </ul>
      </div>
      <div class="content-right">
        <el-tabs v-model="activeName">
          <el-tab-pane label="人员活动规律分析" name="first">
            <regular-view class="content-view" :regularData="regularData" :typeList="typeList"></regular-view>
          </el-tab-pane>
          <el-tab-pane label="轨迹相似度分析" name="second">
            <track-view class="content-view" :trackParams="trackParams" :regularData="regularData" :imgBaseUrl="imgBaseUrl" :typeList="typeList"></track-view>
          </el-tab-pane>
        </el-tabs>
      </div>
    </section>
  </div>
</template>

<script>
import { personIdentification, getUrlParam, getCookie, funcUrlDel } from '@/util/tools.js'
import { apiGetImg, apiGetPersonInfo, apiGetType, apiRegularData } from '@/api/api.js'
import store from '../store.js'
import regularView from '@/components/regular.vue'
import trackView from '@/components/track.vue'

export default {
  name: 'home',
  components: {
    regularView,
    trackView
  },
  data() {
    return {
      pickerBegin: {
        before:{
          disabledDate: (time) => {
            let beginDateVal = new Date(this.fromData.toDate).getTime();
            if (beginDateVal) {
              return time.getTime() > beginDateVal;
            }
          }
        },
        after:{
          disabledDate: (time) => {
            let beginDateVal = new Date(this.fromData.fromDate).getTime();
            if (beginDateVal) {
              return time.getTime() < beginDateVal;
            }
          }
        }
      },
      fromData: {
        id: '',
        fromDate: '1012838400000',
        toDate: '1551196800000'
      },
      activeName: 'first',
      infoList: {
        img: '',
        name: '',
        id: '',
        sex: '',
        age: '',
        tel: '',
        hjdz: '',
        cph: '',
        jtdz: ''
      },
      typeIcon: {
        qc: 'icon-qiche buscolor',
        wb: 'icon-lansewangba wbcolor',
        bg: 'icon-lansebinguan hotelcolor',
        jc: 'icon-lansefeiji planecolor',
        hcz: 'icon-lansehuoche triancolor'
      },
      regularCode: 'bg,hcz,jc,qc',
      typeList: {},
      regularData: {},
      trackParams: {},
      imgBaseUrl: '',
    }
  },
  created() {
    this.setDefaultTime();
    this.getType();
  },
  watch: {
    fromData() {
      // this.getTrackParams();
    }
  },
  methods: {
    // 设置默认时间 获取身份证号
    setDefaultTime() {
      let _to = new Date().getTime(),
      _day = 180*24*60*60*1000;     // 180 天
      this.$set(this.fromData, 'toDate', _to);
      this.$set(this.fromData, 'fromDate', _to - _day);

      // 获取身份证号
      if(getUrlParam('id')) {
        this.$set(this.fromData, 'id', getUrlParam('id'));        
      }
      // 保存token 实现自动登录
      let token = getUrlParam('token');
      if(!token) {
        token = getCookie('token');
      }
      document.cookie = 'token='+ token;
      store.commit('SET_TOKEN',token);
      // 清除url中token 参数
      let url = funcUrlDel('token');
      url ? window.location.href = url : '';
    },
    // 获取人员基本信息
    getPersonInfo() {
      let param = {
        id: this.fromData.id
      }
      apiGetPersonInfo(param).then(res => {
        let _resdata = res.data;
        if(!_resdata && _resdata.length< 1) {
          return;
        }
        let _rdata = _resdata[0];
        this.infoList.name = _rdata['xm'];
        this.infoList.id = _rdata['sfzh'];
        this.infoList.sex = _rdata['xb'];
        this.infoList.age = new Date().getFullYear() - new Date(parseInt(_rdata['csrq'])).getFullYear();
        this.infoList.hjdz = _rdata['hj']+ _rdata['xz'];
        this.infoList.jtdz = _rdata['zzxz'];
      })
    },
    getPersonImg() {
      apiGetImg().then(res => {
        let _resdata = res.data;
        if(!_resdata) {
          return;
        }
        this.imgBaseUrl = _resdata;
        this.infoList.img = _resdata.replace(/_idno_/, this.fromData.id);
      })
    },
    // 获取轨迹信息分类
    getType() {
      this.typeList = {};
      this.regularCode = '';
      apiGetType().then(res => {
        let _resdata = res.data,
            codeArr = [];
        // console.log(_resdata);
        if(_resdata.length < 1 || !_resdata) {
          return false
        }
        _resdata.forEach((elem, index) => {
          this.typeList[elem['code']] = { 'label': elem.label, 'icon': this.typeIcon[elem['code']] };
          codeArr.push(elem['code']);
          // this.typeList[this.regularCode.split(',')[index]] = { 'label': elem.label, 'icon': this.typeIcon[this.regularCode.split(',')[index]] };
          // codeArr.push(this.regularCode.split(',')[index]);
        });
        this.regularCode = codeArr.join(',');
      }).then(res => {
        this.getRegularData();
      })
    },
    // 获取人员活动规律数据 && 获取轨迹相识人员数据
    getRegularData() {
      let _id = this.fromData.id,
          _fromDate = this.fromData.fromDate ? this.fromData.fromDate : '',
          _toDate = this.fromData.toDate ? this.fromData.toDate : '';
      // 身份证号判断
      if(!personIdentification(_id)) {
        this.$message.error('请输入正确的身份证号');
        return false;
      }
      if(!_fromDate && !_toDate) {
        this.$message.error('请选择时间范围');
        return false
      }
      // 更改url中id参数值   使页面刷新还是当前人员信息

      // 获取相似轨迹模块的params
      this.getTrackParams();
      // 获取当前人员的头像
      this.getPersonImg();
      // 获取当前人员的信息
      this.getPersonInfo();
      let params = {
        id: _id,
        code: this.regularCode,
        start: _fromDate,
        end: _toDate
      };
      this.regularData = {};
      // 获取人员活动规律数据
      apiRegularData(params).then(res => {
        let _resdata = res.data;
        // console.log(_resdata)
        if(!_resdata || _resdata.list.length < 1 || !_resdata.list) {
          return false;
        }
        for(let k in _resdata) {
          this.$set(this.regularData, k, _resdata[k]);
        }
      });
    },
    // 获取trackparams
    getTrackParams() {
      this.$set(this.trackParams, 'id', this.fromData.id);
      this.$set(this.trackParams, 'code', this.regularCode);
      this.$set(this.trackParams, 'start', this.fromData.fromDate);
      this.$set(this.trackParams, 'end', this.fromData.toDate);
    }
  }
}
</script>

<style lang="stylus" scoped>
.home{
  min-width 1300px
  height 100%
  background-color #f0f0f0
}
header{
  position relative
  height 60px 
  line-height 60px
  padding 0 20px
  background-color #003880
  .title{
    color #fff
    font-size 20px
    letter-spacing 2.5px
    font-weight bold
  }
  .search-from{
    position absolute
    top 0 
    right 20px
    height 36px
    .el-form-item{
      display inline-block
      margin-bottom 0
      vertical-align middle
    }
    .el-button{
      color #fff
      font-size 20px
      border-color #1977cc
      padding 6px 15px
      background-color #1977cc
    }
    .slabel{
      color #fff
      padding 0 5px
    }
  }
}
.content{
  width 100%
  height calc(100% - 60px)
  font-size 0
  &>div{
    display inline-block
    height 100%
    vertical-align middle
  }
  .content-left{
    width (400/1920) * 100%
    padding 0 20px
    background-color #fff
    .left-top{
      padding 40px 0 20px
      text-align center
      border-bottom 1px solid #d1d1d1
      .img-wrapper{
        width 120px
        height 160px
        overflow hidden
        margin 0 auto 10px
        background-color #1977cc 
        img{
          width 100%
          height 100%
        }
      }
      .text{
        color #1977cc
        font-size 16px
        line-height 24px
      }
    }
    .left-bottom{
      padding-top 20px
      li{
        line-height 22px
        font-size 14px
        margin-bottom 15px
      }
      .iconfont{
        font-size 18px
        margin-right 4px
      }
      i{
        vertical-align middle
      }
      label{
        display inline-block
        width 35%
        color #999
        letter-spacing 2px
        text-align right
        vertical-align top
      }
      span{
        display inline-block
        width 65%
        color #333
        padding-left 10%
      } 
    }
  }
  .content-right{
    width (1520/1920) * 100%
    .content-view{
      height 100%
      padding 10px 15px
      font-size 14px
    }
  }
}
@media screen and (max-width: 1400px) {
  .content .content-left .left-bottom li{
    font-size 12px
    letter-spacing 0
  }
}
</style>
<style lang="stylus">
.el-tabs{
  height 100%
  .el-tabs__nav-wrap::after{
    background-color transparent
  }
  .el-tabs__header{
    padding 0 15px
    margin-bottom 0
    background-color #fff
  }
  .el-tabs__content{
    height calc(100% - 40px)
    .el-tab-pane{
      height 100%
    }
  }
}
.el-form-item{
  .el-form-item__content{
    height 34px
    line-height 34px
    .el-input__inner{
      height 34px
      line-height 34px
    }
  }
}
</style>


